<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>百度定位获取</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=cdMxf0WbUbcE8s7mGGoOq1tXuSbGCdVC"></script>
    <style>
    #map{
      height:100%;
  }
  .baidu_lng_lat{
        font-size: 12px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        line-height: 1.5;
        font-weight: 300;
        color: #111213;
        box-sizing: border-box;
        margin-right: 0;
        margin-left: 0;
        border-top-color: grey;
        padding: .75rem 1.25rem;
        margin-bottom: 1rem;
        border-radius: .25rem;
        position: fixed;
        top: 1rem;
        background-color: white;
        width: auto;
        min-width: 22rem;
        border-width: 0;
        right: 1rem;
        box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      }
    </style>
  </head>
  <body>
    <div id="map" style="width: 100%;height:100vh;z-index:15;"></div>
    <div class="baidu_lng_lat">
      <div>当前位置：</div>
      <div id="lng_lat"></div>
      <div><label>status码：</label><p id="status"></p></div>
      <div><label>定位精度：</label><p id="jingdu"></p></div>
      <div>
        <button onclick="copyText()">复制经纬度</button>
      </div>
    </div>
    <script type="text/javascript">
      var map = new BMap.Map("map");
      var point = new BMap.Point(103.819836, 29.352083);
      map.centerAndZoom(point,12);
      var optstion = {
        /*
        enableHighAccuracy	Boolean	是否要求浏览器获取最佳效果，同浏览器定位接口参数。默认为false
        timeout	Number	超时事件，单位为毫秒。默认为10秒
        maximumAge	Number	允许返回指定事件内的缓存结果，单位为毫秒。如果为0，则每次请求都获取最新的定位结果。默认为10分钟
        SDKLocation	Boolean	是否开启SDK辅助定位
        */
        "enableHighAccuracy":true,
        "timeout":15,

      };
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          var status = this.getStatus();
          document.getElementById("status").innerHTML = status;
          map.panTo(r.point);
          //accuracy	Number	定位精度，单位为米
          document.getElementById("jingdu").innerHTML =  r.accuracy+"米";
          document.getElementById("lng_lat").innerHTML =   r.point.lng + ", " + r.point.lat;
        }
        else {
          alert('failed'+this.getStatus());
        }        
      },optstion);
      
    </script>
    <script>
      function copyText() {
        var text = document.querySelector("#lng_lat").textContent;
        //var text = "要复制的文本";
        navigator.clipboard.writeText(text).then(function() {
          var retext = "经纬度："+text+"已复制到剪贴板";
          alert(retext);
        }, function(err) {
          alert("无法复制文本: ", err);
        });
      }
    </script>
  </body>
</html>